<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SpringBoot Demo</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/toast.min.css">
<!--    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>-->
<!--    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>-->
<!--    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>-->
<!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

<!-- ! 注意 这里的路径不需要static 因为默认是将static作为静态资源的存放目录-->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/popper-1.14.3.js"></script>
    <script src="/js/bootstrap-4.3.1.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/toast.min.js"></script>
    <script src="/js/myToast.js"></script>

    <style>
        html {
            user-select: none;
        }

        .checkbox {
            height: 20px;
            width: 20px;
        }

        .checked {
            background-image: url("/img/check-box-checked.png");
            background-size: 100%;
            background-repeat: no-repeat;
        }

        .check-box-unchecked {
            background-image: url("/img/check-box-unchecked.png");
            background-size: 100%;
            background-repeat: no-repeat;
        }
    </style>

    <script>
        //  激活toast
        $('[data-toggle="popover"]').popover({
            container: 'body',
            title: 'Search',
            html: true,
            placement: 'bottom',
            sanitize: false,
            content: function() {
                return $("#PopoverContent").html();
            }
        })
    </script>
</head>
<body>

<div class="container">
    <div class="col-10 m-auto" id="tar">
        <h2 class="text-center font-weight-bold w-100">货物信息表</h2>
        <p class="small">说明：目前涉及了名称、日期和短缺情况（双击更改）的修改 勾选上的商品才会计入总金额 TODO 增加弹窗提示</p>
        <button  class="btn btn-success float-right my-2" data-toggle="modal" data-target="#add_cargo_modal">添 加</button>
        <table class="table table-bordered table-hover text-center" id="table">
            <thead>
                <tr>
    <!--                <th scope="col">-->
    <!--                    <div class="checkbox check-box-unchecked m-auto">-->
    <!--                        <div class="h-100 w-100" :class="{'checked':isSelectAll}" @click="selectProduct(isSelectAll)"></div>-->
    <!--                    </div>-->
    <!--                </th>-->
                    <th>#</th>
                    <th>
                        <div class="checkbox check-box-unchecked m-auto">
                            <div class="h-100 w-100" :class="{'checked':is_select_all}" @click="select_product(is_select_all)"></div>
                        </div>
                    </th>
                    <th>名称</th>
                    <th>价格</th>
                    <th>保质期</th>
                    <th>货物短缺</th>
                    <th>数量选择</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
<!--            v-for="cargo in cargos"-->

<!--           index不需要修改 可以修改其他-->
            <tbody>
                <tr v-for="(cargo, index) in cargos">
                    <td style="max-width: 100px;">{{ index + 1 }}</td>

                    <td>
                        <div class="checkbox m-auto" @click="cargo.is_selected=!cargo.is_selected" v-bind:class="{checked: cargo.is_selected===true}">
                            <div class="h-100 w-100 check-box-unchecked"></div>
                        </div>
                    </td>

                    <td style="max-width: 100px;">
                        <p v-show="cargo.name_input_stat==false" @click="setAllInputClose(), cargo.name_input_stat=true, saveOldValue(cargo)">{{ cargo.name }}</p>

                        <div v-show="cargo.name_input_stat==true">
                            <div class="input-group">
                                <input v-model="cargo.name" type="text" @keyup.enter="save(cargo), cargo.name_input_stat=false" class="form-control" placeholder="名称">
                                <div class="input-group-append" @click="cargo.name_input_stat=false">
                                    <button class="btn btn-sm btn-outline-success" type="button" @click="save(cargo)">Y</button>
                                    <button class="btn btn-sm btn-outline-danger" type="button" @click="cancel(cargo)">N</button>
                                </div>
                            </div>
                        </div>


                    </td>
                    <td>{{ cargo.price }}</td>

                    <td style="max-width: 130px;">
                        <p v-show="cargo.exp_input_stat!=true" @click="setAllInputClose(), cargo.exp_input_stat=true, saveOldValue(cargo)">
                            {{ cargo.exp }}
                        </p>
<!--                           TODO here-->
                        <div v-show="cargo.exp_input_stat==true">
                            <div class="input-group">
                                <input v-model="cargo.exp" type="date" @keyup.enter="save(cargo), cargo.exp_input_stat=false" class="form-control" placeholder="名称">
                                <div class="input-group-append" @click="cargo.exp_input_stat=false">
                                    <button class="btn btn-sm btn-outline-success" type="button" @click="save(cargo)">Y</button>
                                    <button class="btn btn-sm btn-outline-danger" type="button" @click="cancel(cargo)">N</button>
                                </div>
                            </div>
                        </div>

                    </td>

                    <td @dblclick="saveOldValue(cargo), cargo.shortage = !cargo.shortage ,save(cargo)">{{ cargo.shortage?"是":"否"}}</td>

<!--                    金额相关-->
                    <td>
                        <span @click="cargo.num<=0?0:cargo.num--"><strong style="cursor: pointer">-</strong></span>
                        {{ cargo.num }}
                        <span @click="cargo.num++"><strong style="cursor: pointer">+</strong></span>
                    </td>
                    <td>{{ cargo.num * cargo.price }}</td>

                    <td class="align-content-center justify-content-center">
                        <button class="btn btn-danger" @click="delete_cargo(cargo)">删 除</button>
                    </td>
                </tr>
            </tbody>


        </table>


        <div>
            <p class="font-weight-bold text-right">总金额 {{ total }}</p>
        </div>
    </div>




    <!-- 添加的模态框 -->
    <section>
        <div class="modal fade" id="add_cargo_modal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Add</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <div class="container">
                            <div class="row">
                                <div class="col">

                                    <div class="input-group m-2" @click="isValid = null">
                                        <input  type="text" v-model="new_cargo.name" class="form-control" placeholder="名称">
                                    </div>
                                    <div class="input-group m-2" @click="isValid = null">
                                        <input type="text" v-model="new_cargo.price"  class="form-control" placeholder="价格">
                                    </div>
                                    <div class="input-group m-2" @click="isValid = null">
                                        <input type="date" v-model="new_cargo.exp" class="form-control" placeholder="保质期">
                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button @click="save()" type="button" class="btn btn-primary" v-show="isValid!=false">Save</button>
                        <button type="button" class="btn btn-danger" v-show="isValid==false" style="user-select: none">Error</button>
<!--                        {#-->
<!--                        <p class="alert alert-danger w-50" style="float: left">添加失败</p>#}-->
<!--                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>-->
<!--                        <button @click="save()" type="button" class="btn btn-primary" v-show="isValid!=false">Save</button>-->
<!--                        <button type="button" class="btn btn-danger" v-show="isValid==false" style="user-select: none">Error</button> {#-->
<!--                        <input type="submit" class="btn btn-success">#}-->
                    </div>

                </div>
            </div>
        </div>
    </section>

    <button id="toast_test" class="btn btn-info">test</button>
    <script>
        $("#toast_test").click(function () {
            showToast('error','11','asdsad')
        })
    </script>
</div>




<!--Vue组件-->
<script>

        var add_cargo_modal = new Vue({
            el: "#add_cargo_modal",
            data: {
                isValid: null,
                new_cargo: {
                    name: null,
                    price: null,
                    exp: null
                }

            },
            methods: {
                // TODO 返回改元素的id 以便直接删除
                save: function () {
                    axios.post('/cargo/addCargo', {
                        name: this.new_cargo.name,
                        price: this.new_cargo.price,
                        exp: this.new_cargo.exp,
                        shortage: false
                    }).then(res => {
                        // 这里的插入的id为res.data
                        console.log('新加入的id为', res.data.data)
                        // 页面处理
                        table.$data.cargos.push({
                            id: res.data.data,
                            name: this.new_cargo.name,
                            price: this.new_cargo.price,
                            exp: this.new_cargo.exp,
                            shortage: false,
                            name_input_stat: false,
                            exp_input_stat: false,
                            num: 0,          //数量
                            is_selected: false
                        })
                        Object.keys(this.new_cargo).forEach(key => {
                            this.new_cargo[key] = null
                        })
                        // 关闭modal
                        $('#add_cargo_modal').modal('hide');
                    }).catch(err => {
                        console.log(err)
                        this.isValid = false
                    })
                },


            }
        })

        var table = new Vue({
            el: "#tar",
            data: {
                oldCargo: null,
                cargos: [
                    // {
                    //     id: 1,
                    //     name: "test",
                    //     price: 10.5,
                    //     exp: "2020-1-1",
                    //     shortage: false
                    // }
                ]
            },
            computed: {
                total: function () {
                    var sum = 0
                    this.cargos.filter(cargo => {
                        // 使用过滤方法
                        return cargo.is_selected
                    }).forEach(cargo => {
                        sum += cargo.num * cargo.price
                    })
                    return sum
                },
                is_select_all: function () {
                    //如果productList中每一条数据的select都为true，返回true，否则返回false;
                    return this.cargos.every(cargo => {
                        return cargo.is_selected
                    })
                }
            },
            mounted: function () {

                axios.get('/cargo/selectAllCargo')
                    .then(data => {
                        console.log('cargoList', data.data)
                        this.cargos = data.data

                        var _this = this;
                        this.cargos.map(function(item) {
                            _this.$set(item, 'name_input_stat', false)
                            _this.$set(item, 'exp_input_stat', false)
                            _this.$set(item, 'num', 0)      //数量
                            _this.$set(item, 'is_selected', false);
                        })
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            methods: {
                // getData: function() {
                //     axios.get('/cargo/selectAllCargo')
                //     .then(data => {
                //         console.log(data)
                //         this.data.cargos = data
                //     })
                //     .catch(err => {
                //         console.log(err)
                //     })
                // }
                select_product: function(_isSelect) {
                    // 如果有没有被勾选的checkbox 则_isSelect为false 将对所有的设置为true
                    for (var i = 0; i < this.cargos.length; i++) {
                        this.cargos[i].is_selected = !_isSelect;
                    }
                },

                // 删除货物
                delete_cargo: function (cargo) {
                    console.log("你将要删除：", cargo.id)
                    // 使用此方式传参
                    let param = new URLSearchParams()
                    param.append('id', cargo.id)
                    axios.post('/cargo/deleteCargo', param).then(res=> {
                        console.log(res)
                        // 删除
                        for (var i = 0;i < this.cargos.length; i++){
                            if (this.cargos[i].id == cargo.id){
                                this.cargos.splice(i, 1)
                            }

                        }
                    }).catch(err=> {
                        console.log(err)
                    })

                },
                save: function (cargo) {
                    // WARNING 修改失败需要回滚页面
                    axios.post("/cargo/updateFullCargo", cargo).then(res => {
                        console.log(res)
                    }).catch(err => {
                        cargo = this.oldCargo
                        console.log(err)
                    })
                },
                saveOldValue: function (cargo) {
                    this.oldCargo = JSON.parse(JSON.stringify(cargo))
                },
                cancel: function (cargo) {
                    cargo.name = this.oldCargo.name
                    cargo.exp = this.oldCargo.exp
                    cargo.shortage = this.oldCargo.shortage

                },
                setAllInputClose: function() {
                    var _this = this
                    this.cargos.map(function(item) {
                        _this.$set(item, 'name_input_stat', false);
                        _this.$set(item, 'exp_input_stat', false);

                    })
                }

            }

        })


</script>


</body>
</html>